<script setup lang="ts">
  import { ref, watch, defineEmits } from 'vue';
  import TopInput from './components/top-input.vue';
  import TopTable from './components/top-table.vue';
  import AddForm from './components/add-form.vue';

  const emit = defineEmits(['updateTableData']);
  const tableData = ref('');
  const locationTypeOptions = [
    {
      label: '卸货缓存区',
      value: 0,
    },
    {
      label: '牵引车',
      value: 1,
    },
    {
      label: '母车',
      value: 2,
    },
    {
      label: '料车待配送',
      value: 3,
    },
    {
      label: '料车空车',
      value: 4,
    },
    {
      label: '线边',
      value: 5,
    },
    {
      label: '大件(货架区)',
      value: 6,
    },
    {
      label: '卸货区',
      value: 7,
    },
    {
      label: '装车位',
      value: 8,
    },
    {
      label: '卸车位',
      value: 9,
    },
    {
      label: '装车缓存位',
      value: 10,
    },
    {
      label: '卸车缓存位',
      value: 11,
    },
    {
      label: '大件地堆区',
      value: 12,
    },
  ];

  const areaOptions = [
    {
      label: '101',
      value: '101',
    },
    {
      label: '17180',
      value: '17180',
    },
  ];

  watch(
    tableData,
    () => {
      emit('updateTableData', tableData.value);
    },
    { deep: true }
  );
</script>

<template>
  <div class="flow-query">
    <a-card>
      <template #title>
        <div class="card-title">AGV调度库位管理</div>
      </template>
      <div class="content">
        <TopInput
          @updateArray="tableData = $event"
          :locationTypeOptions="locationTypeOptions"
          :areaOptions="areaOptions"
        />
        <a-divider />
        <TopTable
          :table-data="tableData"
          :locationTypeOptions="locationTypeOptions"
          :areaOptions="areaOptions"
        />
      </div>
      <AddForm
        :locationTypeOptions="locationTypeOptions"
        :areaOptions="areaOptions"
      />
    </a-card>
  </div>
</template>

<style scoped>
  .flow-query {
    margin: 0px;
    padding: 10px;
    height: 100%;
  }
  .card-title {
    font-size: 24px;
  }
  .content {
    display: flex;
    flex-direction: column;
  }
</style>
